<script setup>
import {computed} from 'vue';
import LdLoading from '~components/LdLoading.vue';
const props = defineProps({
    // 类型
    type: {
        type: String,
        default: 'normal',
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false,
    },
    // 链接状态
    link: {
        type: Boolean,
        default: false,
    },
    // 加载中状态
    loading: {
        type: Boolean,
        default: false,
    },
    // 原生type
    nativeType: {
        type: String,
        default: 'button',
    },
    // 填充，需要设置type
    fill:{
        type: Boolean,
        default: false
    },
    // 圆角
    radius: {
        type: Boolean,
        default: false
    },
    // 尺寸
    size: {
        type: String,
        default: 'normal'
    }
});
defineEmits(['click']);
// 按钮class列表
const classList = computed(() => {
    const {type, link, radius, fill, size, loading} = props;
    const list = [type];
    link && list.push('link');
    radius && list.push('radius');
    fill && list.push('fill');
    loading && list.push('loading')
    size && list.push(`size-${size}`);
    return list;
});
</script>
<template>
    <button class="ld-button" :class="classList" :disabled="disabled" :type="nativeType" @click="$emit('click', $event)">
        <ld-loading class="ld-button-loading" :status="loading"></ld-loading>
        <slot />
    </button>
</template>
<style lang="scss">
@import "../scss/mixin.scss";
$default-bg-color: #fff;
/** 默认模式 **/
$normal-color: #606266;
$normal-border-color: #dcdfe6;
$normal-hover-color: #409eff;
$normal-active-color: #096dd9;
$normal-fill-hover-color: #409eff;
$normal-fill-hover-border-color: #c6e2ff;
$normal-fill-hover-bg-color: #ecf5ff;
$normal-fill-active-border-color: #409eff;
$normal-link-hover-color: #909399;
$normal-link-active-color: #303133;
/** 基本模式 **/ 
$primary-color: #409eff;
$primary-border-color: #409eff;
$primary-bg-color: #fff;
$primary-hover-color: #79bbff;
$primary-active-color: #096dd9;
$primary-fill-bg-color: #409eff;
$primary-fill-hover-bg-color: #79bbff;
$primary-fill-active-bg-color: #096dd9;
/** 成功模式 **/
$success-color: #67c23a;
$success-hover-color: #95d475;
$success-active-color: #529b2e;
$success-hover-color: #b3e19d;
$success-fill-bg-color: #67c23a;
$success-fill-hover-bg-color: #95d475;
$success-fill-active-bg-color: #529b2e;
/** 信息模式 **/
$info-color: #909399;
$info-hover-color: #b1b3b8;
$info-active-color: #73767a;
$info-fill-bg-color: #909399;
$info-fill-hover-bg-color: #b1b3b8;
$info-fill-active-bg-color: #73767a;
/** 警告模式 **/
$warning-color: #e6a23c;
$warning-hover-color: #eebe77;
$warning-active-color: #b88230;
$warning-fill-bg-color: #e6a23c;
$warning-fill-hover-bg-color: #eebe77;
$warning-fill-active-bg-color: #b88230;
/** 危险模式 **/
$danger-color: #ff4d4f;
$danger-hover-color: #ff7875;
$danger-active-color: #c45656;
$danger-fill-bg-color: #ff4d4f;
$danger-fill-hover-bg-color: #ff7875;
$danger-fill-active-bg-color: #c45656;
.ld-button{
    display: inline-flex;
    border: 1px solid;
    cursor: pointer;
    @include clear-default-touch-style;
    background-color: $default-bg-color;
    .ld-button-loading{
        width: 1.2em;
        height: 1.2em;
        margin-right: 3px;
    }
    /** 尺寸 **/
    &.size-small{
        font-size: 12px;
        padding: 5px 11px;
    }
    &.size-normal{
        font-size: 14px;
        padding: 8px 15px;
    }
    &.size-large{
        font-size: 14px;
        padding: 12px 19px;
    }
    /** 类型 **/ 
    &.normal{
        border-color: $normal-border-color;
        color: $normal-color;
        &:hover{
            border-color: $normal-hover-color;
            color: $normal-hover-color;
        }
        &:active{
            color: $normal-active-color;
            border-color: $normal-fill-hover-border-color;
        }
    }
    &.primary{
        border-color: $primary-border-color;
        color: $primary-color;
        &:hover{
            border-color: $primary-hover-color;
            color: $primary-hover-color
        }
        &:active{
            border-color: $primary-active-color;
            color: $primary-active-color
        }
    }
    &.success{
        border-color: $success-color;
        color: $success-color;
        &:hover{
            border-color: $success-hover-color;
            color: $success-hover-color;    
        }
        &:active{
            border-color: $success-active-color;
            color: $success-active-color
        }
    }
    &.info{
        border-color: $info-color;
        color: $info-color;
        &:hover{
            border-color: $info-hover-color;
            color: $info-hover-color;
        }
        &:active{
            border-color: $info-active-color;
            color: $info-active-color;   
        }
    }
    &.warning{
        border-color: $warning-color;
        color: $warning-color;    
        &:hover{
            border-color: $warning-hover-color;
            color: $warning-hover-color;
        }
        &:active{
            border-color: $warning-active-color;
            color: $warning-active-color;   
        }
    }
    &.danger{
        border-color: $danger-color;
        color: $danger-color;    
        &:hover{
            border-color: $danger-hover-color;
            color: $danger-hover-color;
        }
        &:active{
            border-color: $danger-active-color;
            color: $danger-active-color;   
        }
    }
    /** 填充模式 **/
    &.fill{
        &.normal{
            &:hover{
                border-color: $normal-fill-hover-border-color;
                background-color: $normal-fill-hover-bg-color;
            }
            &:active{
                border-color: $normal-fill-active-border-color;
            }
        }
        &.primary{
            color: #fff;
            background-color: $primary-fill-bg-color;
            border-color: transparent;
            &:hover{
                background-color: $primary-fill-hover-bg-color;
            }
            &:active{
                background-color: $primary-fill-active-bg-color;
            }
        }
        &.success{
            color: #fff;
            border-color: transparent;
            background-color: $success-fill-bg-color;
            &:hover{
                background-color: $success-fill-hover-bg-color;
            }
            &:active{
                background-color: $success-fill-active-bg-color;
            }
        }
        &.info{
            color: #fff;
            border-color: transparent;
            background-color: $info-fill-bg-color;
            &:hover{
                background-color: $info-fill-hover-bg-color;
            }
            &:active{
                background-color: $info-fill-active-bg-color;
            }
        }
        &.warning{
            color: #fff;
            border-color: transparent;
            background-color: $warning-fill-bg-color;
            &:hover{
                background-color: $warning-fill-hover-bg-color;
            }
            &:active{
                background-color: $warning-fill-active-bg-color;
            }
        }
        &.danger{
            color: #fff;
            border-color: transparent;
            background-color: $danger-fill-bg-color;
            &:hover{
                background-color: $danger-fill-hover-bg-color;
            }
            &:active{
                background-color: $danger-fill-active-bg-color;
            }
        }
    }
    /** 链接模式 **/
    &.link{
        background-color: transparent;
        &.normal{
            border-color: transparent;
            &:hover{
                color: $normal-link-hover-color;
            }
            &:active{
                color: $normal-link-active-color;
            }
        }
        &.primary, &.success, &.info, &.warning, &.danger{
            border-color: transparent;
        }
    }
    /** 圆角 **/
    &.radius{
        border-radius: 20px;
    }
    &:disabled{
        opacity: 0.6;
        pointer-events: none;
        cursor: not-allowed;
    }
}
</style>